/*
 * @Author: lusx
 * @Date: 2019-02-18 13:40:31
 * @Last modified by:   lusx
 * @Last modified time: 08-04-2019 12:00:11
 */
import {toJS} from 'mobx';
import {WeaTableNew} from 'comsMobx'
import WeaTopHoc from '../hocs/weaTopHoc';
import GovernChart from '../governChart/governChart';
import {WeaLocaleProvider} from 'ecCom';
import { inject, observer} from 'mobx-react';
const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

//仪表视图
@WeaTopHoc
@inject('countStore')
@observer
class StatisticsPages extends React.Component {

    constructor(props) {
        super(props);
        this.state={
         selectedKey: 0,
         width:0
        }
    }
    componentDidMount(){
        this.setState({
        width:document.body.clientWidth
        })
    }
    componentWillReceiveProps(nextProps) {
        if(nextProps.type !== this.props.type){
            this.setState({
                width:document.body.clientWidth
            })
            const {resetTable} = nextProps;
            resetTable(true)
        }
    }
    componentWillUnmount(){
        const {resetTable} = this.props;
        resetTable(true)
        this.props.countStore.data.pies=[];
    }
    render() {
        const {type,pies,searchsBaseValue,tableStore} = this.props;
        const {selectedKey} = this.state;
        let scrollWidth = document.body.clientWidth - 395;
        const needScroll = type === "1" ? true : false;
        return (
            <div className="g-meterChart" >
              <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@zvj9wz`}
                style={{clear:'both'}}
                key={tableStore}
                comsWeaTableStore={tableStore}
                childrenColumnName="subListspan"
                hasOrder={true}
                needScroll={needScroll}
                getColumns={c=>this.reRenderColumns(c)}
              />
            {"23".includes(type) && <GovernChart ecId={`${this && this.props && this.props.ecId || ''}_GovernChart@4et89k`} key={type} dataList={pies} newWidth={'100%'} optionTemplate={this.templateFun.bind(this) } />}
            </div>
        )
    }
    reRenderColumns(columns){
      const pattern = /percentag/gi;
      columns.forEach(c=>{
          if( pattern.test(c.dataIndex)){
              c.render = function(text, record){
                  return  <div >{parseFloat(text).toFixed(2)}</div>
              }
          }
      })
      return columns;
    }
    templateFun(item=[],index){
      const {names=[],title=''} = this.props;
      let newtitle = names.length === 0 ? '' : title;
      const option = {
                      title : {
                          text:newtitle,
                          subtext: '',
                          x:'center'
                      },
                      tooltip : {
                          trigger: 'item',
                          formatter: "{a} <br/>{b} : {c} ({d}%)"
                      },
                      legend: {
                          orient: 'vertical',
                          top: 'middle',
                          right: this.state.width/7,
                          data: toJS(names)
                      },
                      series : [
                          {
                              name: getLabel('387997','访问来源'),
                              type: 'pie',
                              radius : '55%',
                              center: ['50%', '60%'],
                              data: toJS(item),
                              label: {
                                      normal: {
                                          formatter: '{b|{b}：}{per|{d}%}  ',
                                          borderRadius: 4,
                                          rich: {
                                              b: {
                                                  fontSize: 12,
                                                  lineHeight: 20
                                              },
                                              per: {
                                                  fontSize: 12,
                                                  borderRadius: 2
                                              }
                                          }
                                      }
                                  },
                              itemStyle: {
                                  emphasis: {
                                      shadowBlur: 10,
                                      shadowOffsetX: 0,
                                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                                  }
                              }
                          }
                      ]
                  };
          return option;
    }
}
export default StatisticsPages;
